<template>
  <div>
    <el-card>
      <el-form :model="formInline" ref="ruleForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="职务编码" label-width="80px" prop="code">
              <el-input
                size="small"
                v-model="formInline.code"
                placeholder="请输入职务编码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职务名称" label-width="80px" prop="name">
              <el-input
                size="small"
                v-model="formInline.name"
                placeholder="请输入职务名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职级" prop="postRank" v-show="isShowSelect">
              <el-select
                size="small"
                v-model="formInline.postRank"
                placeholder="请选择职级"
                style="width: 240px"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option label="员级" value="1"></el-option>
                <el-option label="助级" value="2"></el-option>
                <el-option label="中级" value="3"></el-option>
                <el-option label="副高级" value="4"></el-option>
                <el-option label="正高级" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                size="small"
                @click="inquiry"
                type="primary"
                icon="el-icon-search"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh-right"
                @click="resetForm('ruleForm')"
                >重置</el-button
              >
              <el-button size="small" type="text" @click="controlButton"
                >{{ isShowBuuton ? "展开" : "收起"
                }}<i
                  :class="isShowBuuton ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 按钮区域 -->
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="addShowDialog"
        >新增</el-button
      >
      <el-button size="small" type="primary" icon="el-icon-download"
      @click="exportMethod"
        >导出</el-button
      >
      <el-button size="small" type="primary" icon="el-icon-back"
        >导入</el-button
      >
      <!-- 批量删除的按钮 -->
      <el-dropdown style="margin-left: 20px" v-show="isShowDelButton">
        <el-button size="small"
          >批量删除<i class="el-icon-arrow-down el-icon--right"></i
        ></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-button
              type="text"
              style="color: black"
              @click="deleteBatchPositionButton"
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 清空区域 -->
      <div style="margin-top: 30px">
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ multipleSelection.length }}</a
          >项
          <a style="margin-left: 24px" @click="toggleSelection">清空</a>
        </div>
      </div>

      <el-table
        border
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column label="#" align="center" type="index" width="55">
        </el-table-column>
        <el-table-column
          prop="code"
          align="center"
          label="职务编码"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="职务名称"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="postRank_dictText"
          label="职级"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="editShowDialog(scope)"
              >编辑</el-button
            >

            <el-dropdown>
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  @confirm="deletePostion(scope)"
                >
                  <el-button slot="reference" style="border: none"
                    >删除</el-button
                  >
                </el-popconfirm>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 
      分页器 
      当前第几页、数据总条数、每一页展示条数、连续页码数
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      current-page:代表的是当前第几页
      total：代表分页器一共需要展示数据条数
      page-size：代表的是每一页需要展示多少条数据
      page-sizes：代表可以设置每一页展示多少条数据
      layout：可以实现分页器布局
      pager-count:按钮的数量  如果 9  连续页码是7 如果7 连续页码数是5
    -->
      <el-pagination
        style="margin-top: 20px; text-align: center"
        :current-page="pageNo"
        :total="total"
        :page-size="limit"
        :pager-count="7"
        :page-sizes="[10, 20, 30]"
        layout="prev, pager, next, jumper,->,sizes,total"
        @size-change="handleSizeChange"
        @current-change="getTableDataList"
      >
      </el-pagination>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="45%">
      <el-form
        :model="dialogForm"
        :rules="dialogRules"
        ref="dialogorm"
        label-width="100px"
      >
        <el-form-item label="职务编码" prop="code">
          <el-input v-model="dialogForm.code"></el-input>
        </el-form-item>
        <el-form-item label="职务编码" prop="name">
          <el-input v-model="dialogForm.name"></el-input>
        </el-form-item>
        <el-form-item label="职务等级" prop="postRank">
          <el-select
            v-model="dialogForm.postRank"
            placeholder="请选择等级"
            style="width: 550px"
          >
            <el-option label="请选择" value=""></el-option>
            <el-option label="员级" value="1"></el-option>
            <el-option label="助级" value="2"></el-option>
            <el-option label="中级" value="3"></el-option>
            <el-option label="副高级" value="4"></el-option>
            <el-option label="正高级" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelOrReset('dialogorm')">取 消</el-button>
        <el-button type="primary" @click="addSubmit('dialogorm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPositionList,
  addPosition,
  delPosition,
  editPosition,
  deleteBatchPosition,
  exportXls,
  duplicateCheck
} from "@/api/postion.js";
export default {
  data() {
    return {
      isShowDelButton: false,
      //多选
      multipleSelection: [],
      //编辑或增加状态
      scopeData: {},
      state: true,
      title: "",
      pageNo: 1,
      //总共数据得条数
      total: 11,
      //当前页显示数据得条数
      limit: 10,
      //表单
      dialogForm: {
        code: "",
        name: "",
        postRank: "",
      },
      formInline: {
        code: "",
        name: "",
        postRank: "",
      },
      //校验
      dialogRules: {
        code: [{ required: true, message: '请输入部门编码', trigger: 'change' }],
        name: [{ required: true, message: '请输入职务名称', trigger: 'change' }],
        postRank: [
          { required: true, message: '请选择职级', trigger: 'change' },
        ],
      },
      tableData: [],
      //控制按钮
      isShowBuuton: true,
      //控制显示Select控件
      isShowSelect: false,
      //弹窗显示
      dialogVisible: false,
    };
  },
  methods: {
    //获取列表
    getTableDataList(pager = 1) {
      this.pageNo = pager;
      // const { pageNo, limit } = this;
      let data = {
        pageNo: this.pageNo,
        limit: this.limit,
      };
      getPositionList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.result.records;
          this.total = res.result.total;
          // if(this.multipleSelection.length != 0){
          //     this.$refs.multipleTable.toggleRowSelection(this.multipleSelection,true);
          // }
          
        }
      });
    },
    handleSizeChange(limit) {
      //重新整理参数
      this.limit = limit;
      this.getTableDataList();
    },
    //查询
    inquiry() {
      //console.log(this.formInline);
      let data = {
        pageNo: 1,
        limit: this.limit,
        code: this.formInline.code,
        name: this.formInline.name,
        postRank: this.formInline.postRank,
      };
      getPositionList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    //重置
    resetForm(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
    //控制按钮
    controlButton() {
      this.isShowBuuton = !this.isShowBuuton;
      this.isShowSelect = !this.isShowSelect;
    },
    //取消按钮重置表单
    cancelOrReset(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
    //新增弹窗
    addShowDialog() {
      this.dialogVisible = true;
      this.title = "新增";
      this.state = true;
    },
    addSubmit(dialogorm) {
      if (this.state) {
        let data = {
          code: this.dialogForm.code,
          name: this.dialogForm.name,
          postRank: this.dialogForm.postRank,
        };
        this.$refs[dialogorm].validate((valid) => {
          if (valid) {
            this.dialogVisible = false;
            this.$refs[dialogorm].resetFields();
            addPosition(data).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "添加租户成功",
                });
                this.getTableDataList();
              } else {
                this.$message({
                  type: "info",
                  message: res.mesinfosage,
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        let data = {
          code: this.dialogForm.code,
          name: this.dialogForm.name,
          postRank: this.dialogForm.postRank,
          id: this.scopeData.id,
          postRank_dictText: this.scopeData.postRank_dictText,
          sysOrgCode: this.scopeData.sysOrgCode,
          createBy: this.scopeData.createBy,
          createTime: this.scopeData.createTime,
        };
        this.$refs[dialogorm].validate((valid) => {
          if (valid) {
            editPosition(data).then((res) => {
              this.dialogVisible = false;
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.message,
                });
                this.getTableDataList();
              } else {
                this.$message({
                  type: "info",
                  message: res.message,
                });
              }
            });
          }
        });
      }
    },
    //删除
    deletePostion(scope) {
      // console.log(scope);
      let id = scope.row.id;
      delPosition(id).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTableDataList(
            this.tableData.length > 1 ? this.pageNo : this.pageNo - 1
          );
          console.log(this.multipleSelection);
        }
      });
    },
    // 开启edit
    editShowDialog(scope) {
      this.dialogVisible = true;
      this.title = "编辑";
      this.state = false;
      console.log(scope);
      this.scopeData = scope.row;
      this.dialogForm.code = scope.row.code;
      this.dialogForm.name = scope.row.name;
      this.dialogForm.postRank = scope.row.postRank;
    },
    //多选清空
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      if (this.multipleSelection.length) {
        //显示批量删除
        this.isShowDelButton = true;
      } else {
        //隐藏批量删除
        this.isShowDelButton = false;
      }
    },
    //清空选中
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
      this.isShowDelButton = false;
    },
    //批量删除
    deleteBatchPositionButton() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
             console.log(this.multipleSelection);
       let idList =[];
        for(let item of this.multipleSelection ){
          idList.push(item.id)
        }
        idList=idList.join(',')
        console.log(idList);
        deleteBatchPosition(idList).then(res=>{
           console.log(res);
           if (res.code==200) {
            this.$message({
                type: "success",
                message: "删除成功!",
              });
           }
           this.getTableDataList(
            this.tableData.length > 1 ? this.pageNo : this.pageNo - 1
          );
        });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
   
    },
    //导出数据EXL
    exportMethod() {
      let _self = this;
      exportXls().then((res) => {
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([res], { type: "application/vnd.ms-excel" }),
            "导出文件.xls"
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([res], { type: "application/vnd.ms-excel" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "导出文件.xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },
    
  },
  mounted() {
    this.getTableDataList();
    
  },
};
</script>
<style lang="less" scoped>
.el-card {
  margin: 15px 10px;
}
.el-dropdown-link {
  margin-left: 10px;
  cursor: pointer;
  color: #409eff;
}
</style>
